<template>
  <div class="app-container">
    <!-- *************************************搜索区************************************* -->
    <PageSearch :showSearch.sync="showSearch" :getList="getList" :handleQuery="handleQuery" :resetQuery="resetQuery">
      <template #form>
        <el-form v-show="showSearch" :model="queryParams" ref="queryForm" size="small" :inline="true">
          <el-row>
            <el-form-item prop="skuNo">
              <el-input
                v-model="queryParams.skuNo"
                :placeholder="$t('sku编号')"
                clearable
                style="width: 240px"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item prop="applyDistrName">
              <el-input
                v-model="queryParams.applyDistrName"
                :placeholder="$t('供应商名称')"
                clearable
                style="width: 240px"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <!-- 时间选择 -->
            <el-form-item>
              <el-date-picker
                v-model="queryParams.time"
                :start-placeholder="$t('开始日期')"
                :end-placeholder="$t('结束日期')"
                type="daterange"
                value-format="yyyy-MM-dd"
              />
            </el-form-item>
            <el-form-item prop="applyStatus">
              <el-select v-model="queryParams.applyStatus" :placeholder="$t('审批状态')">
                <el-option :label="$t('待审批')" value="1"></el-option>
                <el-option :label="$t('审批通过')" value="2"> </el-option>
                <el-option :label="$t('拒绝')" value="3"> </el-option>
              </el-select>
            </el-form-item>

            <el-form-item prop="payStatus">
              <el-select v-model="queryParams.payStatus" :placeholder="$t('付款状态')">
                <el-option :label="$t('支付完成')" value="2"></el-option>
                <el-option :label="$t('部分支付')" value="1"></el-option>
                <el-option :label="$t('未支付')" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item prop="skuNameCn">
              <el-input v-model="queryParams.skuNameCn" :placeholder="$t('中文名')" clearable style="width: 240px" />
            </el-form-item>
            <el-form-item prop="skuNameJp">
              <el-input
                v-model="queryParams.skuNameJp"
                :placeholder="$t('日文名')"
                clearable
                style="width: 240px"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-row>
        </el-form>
      </template>
      <template #actions>
        <el-row :gutter="10">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              :disabled="tableCheck.length == 0"
              size="mini"
              @click="handleBatchPrePay"
            >
              {{ $t('批量提前付款') }}
            </el-button>
          </el-col>
        </el-row>
      </template>
      <template #pagination>
        <pagination
          v-show="pageTotal > 0"
          :total="pageTotal"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </template>
    </PageSearch>

    <el-table
      @row-click="(row) => $rowClick(row, clickedRows)"
      :row-class-name="({ row }) => $tableRowClassName(row, clickedRows)"
      :height="calTableHeight()"
      v-loading="loading"
      ref="TableRef"
      @selection-change="(rows) => (tableCheck = rows)"
      :data="tableData"
      row-key="menuId"
    >
      <el-table-column
        :selectable="(row) => !(row.waitBillNum == null || row.waitBillNum <= 0 || row.offlineStatus !== null)"
        show-overflow-tooltip
        type="selection"
        width="55"
        align="center"
      />

      <el-table-column :label="$t('申请者')" prop="applyName" align="center" width="150" />
      <!-- sku -->
      <el-table-column align="center" width="110" show-overflow-tooltip prop="skuNo" :label="$t('sku编号')">
        <template slot-scope="scope">
          <div @click="handleEdit(scope.row)" style="cursor: pointer; color: #1890ff">
            {{ scope.row.skuNo }}
          </div>
        </template>
      </el-table-column>
      <!-- 主图 -->
      <el-table-column :label="$t('主图')" prop="imgUrl" align="center">
        <template slot-scope="scope">
          <el-image
            style="width: 50px; height: 50px"
            fit="contain"
            :key="Math.random()"
            v-hover="scope.row.imgUrl"
            :src="scope.row.imgUrl + '?x-oss-process=image/resize,w_100/quality,q_70'"
          />
        </template>
      </el-table-column>
      <!-- 申请时价格 -->
      <el-table-column :label="$t('申请时价格')" prop="applyPrice" align="center" width="110">
        <template slot-scope="scope">
          {{ (+scope.row.applyPrice).toFixed() }}
        </template>
      </el-table-column>
      <!-- <el-table-column
        align="center"
        show-overflow-tooltip
        prop="cloudPrice"
        :label="$t('供应商价格')"
        width="110">
        <template slot-scope="scope">
          {{ (+scope.row.cloudPrice).toFixed() }}
        </template>
      </el-table-column> -->

      <el-table-column align="center" show-overflow-tooltip prop="applyNum" :label="$t('申请数量')" />
      <el-table-column align="center" show-overflow-tooltip prop="useNum" width="110">
        <template #header>
          <span>
            <el-tooltip placement="top">
              <template #content>
                <p>包裹生成前的可用数量，包裹生成后就会扣除对应的数量</p>
              </template>
              <i class="el-icon-question" style="cursor: pointer; color: #409eff"></i>
            </el-tooltip>
          </span>
          <span>{{ $t('剩下可用数量') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="saleNum" :label="$t('出售数量')" width="110">
        <template #header>
          <span>
            <el-tooltip placement="top">
              <template #content>
                <p>卖了多少个了，库存出库后计算数量</p>
              </template>
              <i class="el-icon-question" style="cursor: pointer; color: #409eff"></i>
            </el-tooltip>
          </span>
          <span>{{ $t('出售数量') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="waitBillNum" :label="$t('待出账单数量')" width="110">
        <template #header>
          <span>
            <el-tooltip placement="top">
              <template #content>
                <p>有多少个账单没生成的，生成了账单不代表已经付款了</p>
              </template>
              <i class="el-icon-question" style="cursor: pointer; color: #409eff"></i>
            </el-tooltip>
          </span>
          <span>{{ $t('待出账单数量') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="payNum" :label="$t('付款数量')" width="110">
        <template #header>
          <span>
            <el-tooltip placement="top">
              <template #content>
                <p>付款数量大于申请数量的50%才能继续申请</p>
              </template>
              <i class="el-icon-question" style="cursor: pointer; color: #409eff"></i>
            </el-tooltip>
          </span>
          <span>{{ $t('付款数量') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="80" prop="offlineStatus" :label="$t('线下支付审核状态')">
        <template slot-scope="{ row }">
          <span v-if="row.offlineStatus == 1">
            <!-- 待审核 -->
            {{ $t('审核中') }}
          </span>
          <span style="color: green" v-if="row.offlineStatus == 2">
            <!-- 审核通过 -->
            {{ $t('已确定') }}
          </span>
          <span style="color: red" v-if="row.offlineStatus == 3">
            <!-- 审核不通过 -->
            {{ $t('取消') }}
          </span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip :label="$t('申请通过状态')" align="center" prop="applyStatus" width="110">
        <template slot-scope="scope">
          <span v-if="scope.row.applyStatus == 1" style="color: red">
            {{ $t('待审批') }}
          </span>
          <span v-else-if="scope.row.applyStatus == 2 && scope.row.backNum == 0" style="color: rgb(86, 143, 0)">
            {{ $t('审批通过') }}
          </span>
          <span
            v-else-if="scope.row.applyNum > scope.row.backNum && scope.row.backNum != 0"
            style="color: rgb(143, 134, 0)"
          >
            {{ $t('部分退回') }}
          </span>
          <span v-else-if="scope.row.applyNum == scope.row.backNum" style="color: rgb(2, 0, 143)">
            {{ $t('全部退回') }}
          </span>
          <span
            @click="alertMessage(scope.row)"
            v-else-if="scope.row.applyStatus == 3"
            style="color: #c0c4cc; cursor: pointer"
          >
            {{ $t('拒绝') }}
          </span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip :label="$t('付款完成状态')" align="center" prop="payStatus" width="110">
        <template slot-scope="scope">
          <!-- 0：未支付 1：部分支付 2：支付完成 -->
          <span v-if="scope.row.payStatus == 0" style="color: red">
            {{ $t('未支付') }}
          </span>
          <span v-else-if="scope.row.payStatus == 1" style="color: red">
            {{ $t('部分支付') }}
          </span>
          <span v-else-if="scope.row.payStatus == 2" style="color: rgb(86, 143, 0)">
            {{ $t('支付完成') }}
          </span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip :label="$t('退回数量')" align="center" prop="backNum" />
      <el-table-column show-overflow-tooltip :label="$t('申请日期')" align="center" prop="applyTime" />
      <!-- <el-table-column show-overflow-tooltip :label="$t('所属者')" align="center" prop="applyDistrName" /> -->

      <el-table-column fixed="right" :label="$t('操作')" width="250" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            :disabled="
              scope.row.applyStatus != 2 ||
              (scope.row.applyStatus == 2 && scope.row.backNum > 0) ||
              (scope.row.applyStatus == 2 && scope.row.useNum == 0) ||
              (scope.row.applyStatus == 2 && scope.row.payStatus == 2)
            "
            @click="backToInventory(scope.row)"
          >
            {{ $t('退回库存') }}
          </el-button>
          <el-link
            @click="handleDelete(scope.row)"
            v-hasPermi="['distribution:skuSellerApply:remove']"
            v-show="scope.row.applyStatus != 2"
            type="danger"
            style="margin: 0 10px"
            :underline="false"
          >
            {{ $t('删除') }}
          </el-link>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="pageTotal > 0"
      :total="pageTotal"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 退回库存 -->
    <el-dialog
      :visible.sync="backToInventoryFlage"
      :before-close="backToInventoryCancel"
      :title="$t('退回库存')"
      top="7vh"
      width="500px"
      destroy-on-close
      :modal="true"
    >
      <div>
        <el-form
          ref="backToInventoryData"
          :model="backToInventoryData"
          :rules="backToInventoryDataRuler"
          label-width="50px"
        >
          <el-row>
            <el-col :span="24">
              <el-form-item :label="$t('数量')" prop="backNum">
                <el-input v-model="backToInventoryData.backNum" :placeholder="$t('请输入')" />
              </el-form-item>
            </el-col>
            <el-col :span="24" :offset="0">
              <!--  -->
              <el-alert
                :title="
                  $t(
                    '申请后如果觉得卖不完可以退回库存，可以选择数量，但是一个申请只能退回一次，并且退回数量大于一半会在卖家SKU库存表标记限制被标记限制的sku申请时，只能申请月销售数量例如：J-(00000006)申请了20，如果退回了10个就会被标记限制，限制后如果还想申请，只能申请等于或小于该sku的月销量的数量，或者向管理员提出解除限制',
                  )
                "
                show-icon
                :closable="false"
                effect="dark"
                style="margin-bottom: 20px; color: #414141"
                type="warning"
              >
              </el-alert>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="backToInventorySubmitForm">{{ $t('确定') }}</el-button>
        <el-button @click="backToInventoryCancel">{{ $t('取消') }}</el-button>
      </div>
    </el-dialog>
    <!-- sku详情/修改 -->
    <Skucontmoduler @relaod="relaod" ref="Skucontmoduler"></Skucontmoduler>
    <!-- 支付弹框 -->
    <el-dialog
      :visible.sync="cloudProductPay"
      :title="$t('支付详情')"
      :before-close="cloudProductPayCancel"
      top="7vh"
      width="500px"
      destroy-on-close
      :modal="true"
    >
      <el-alert
        :title="$t('提前付款可以提前结束该申请的结算，一般用于帮助下次申请获得权限，提前付款只能付款未结束的全部数量')"
        show-icon
        :closable="false"
        effect="dark"
        style="margin-bottom: 20px"
        type="warning"
      >
      </el-alert>
      <div class="payAllData">
        <div class="payTitle">{{ $t('支付详情') }}:</div>
        <div class="payMessage">
          <span style="margin-right: 20px"> {{ $t('支付详情') }}:{{ payFormData.payNum }} </span>
          <span> {{ $t('金额') }}: {{ payFormData.orderAmount ? (+payFormData.orderAmount).toFixed() : '' }}JPY </span>
        </div>
        <div class="payContent">
          <div class="payList" v-for="(item, index) in payTypeList" :key="index" @click="checkData(item)">
            <el-image style="height: 100%" :src="item.payChannelImg"></el-image>
          </div>
        </div>
        <div style="display: flex; justify-content: center; margin-top: 20px">
          <el-button @click="confirmPayment()" v-hasPermi="['system:skuSellerApply:handBeforePay']">
            {{ $t('确认支付') }}</el-button
          >
        </div>
      </div>
      <div slot="footer" v-if="payStatus" class="dialog-footer">
        <el-button type="primary" @click="cloudProductPayCancel">
          {{ $t('已支付') }}
        </el-button>
      </div>
    </el-dialog>
    <!-- 支付弹框 支付详情-->
    <Pay :show.sync="pay.show" :formData="pay.formData" @getList="getList" @updataPayType="updataPayType">
      <template #header>
        <el-alert
          :title="
            $t('提前付款可以提前结束该申请的结算，一般用于帮助下次申请获得权限，提前付款只能付款未结束的全部数量')
          "
          show-icon
          :closable="false"
          effect="dark"
          style="margin-bottom: 20px"
          type="warning"
        >
        </el-alert>
      </template>
      <template #default="{ handlePayMethod }">
        <div style="margin: 20px 0" v-hasPermi="['distribution:bill:sellerBatchBeforeOfflinePay']">
          {{ $t('线下支付') }}
        </div>
        <div class="payContentOffline" v-hasPermi="['distribution:bill:sellerBatchBeforeOfflinePay']">
          <el-button
            :class="{ 'is-active': offlinePayTypestr == 1 }"
            @click="offlinePayType(1, handlePayMethod, 'offlineCash')"
          >
            {{ $t('现金支付') }}
          </el-button>
          <el-button
            :class="{ 'is-active': offlinePayTypestr == 2 }"
            @click="offlinePayType(2, handlePayMethod, 'offlineTransfer')"
          >
            {{ $t('银行卡转账') }}
          </el-button>
        </div>
        <!-- <div style="display: flex; justify-content: center; margin-top: 20px">
          <el-button type="primary" @click="confirmPayment" v-hasPermi="['system:skuSellerApply:handBeforePay']">
            {{ $t('确认支付') }}</el-button
          >
        </div> -->
      </template>
    </Pay>
  </div>
</template>

<script>
import {
  batchSellerBeforePay,
  delSkuSellerApply,
  getSkuSellerApplyList,
  handBeforePay,
  sellerBackSku,
  sellerBatchBeforeOfflinePay,
  toPay,
} from '@/api/distribution/sku/sellerApplicationList'
import { sellerList } from '@/api/distribution/sku/SupplierLpproval'
export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
    if (this.$route.query.goToBeforePaySku) {
      this.queryParams.skuNo = JSON.parse(JSON.stringify(this.$route.query.goToBeforePaySku))
      this.showSearch = true
      setTimeout(() => {
        this.getList()
      }, 500)
    }
  },
  mounted() {
    if (this.$route.query.goToBeforePaySku) {
      this.queryParams.skuNo = JSON.parse(JSON.stringify(this.$route.query.goToBeforePaySku))
      this.showSearch = true
      setTimeout(() => {
        this.getList()
      }, 500)
    }
  },
  components: {},
  name: 'SellerApplicationList',
  data() {
    return {
      /**@type {string|number} */
      offlinePayTypestr: '', //支付方式
      pay: {
        show: false,
        formData: {},
      },
      tableCheck: [],
      /**点击的表格项 */
      clickedRows: [],
      sellerListData: [],

      showSearch: false,
      /**提前付款 */
      earlyPayInfo: {
        data: {},
      },
      payStatus: false,
      payFormData: {},
      payTypeList: [],
      payType: '',
      cloudProductPay: false,
      backToInventoryFlage: false,
      backToInventoryData: {
        backNum: '',
      },
      curentData: {
        label: '',
        skuId: '',
        skuNo: '',
        imgUr: '',
        skuNameCn: '',
        skuNameJp: '',
        cloudStock: '',
        cloudPrice: '',
        distrName: '',
        updateTime: '',
        remark: '',
      },
      editDialogConfig: false,
      tableData: [],
      /**数据总条数 */
      pageTotal: 0,
      loading: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        value2: 1,
        time: [],
        skuNo: '',
      },
      backToInventoryDataRuler: {
        backNum: [
          {
            required: true,
            message: this.$t('请输入'),
            trigger: 'blur',
          },
        ],
      },
      curentDataRuler: {
        applyNum: [
          {
            required: true,
            message: this.$t('请输入'),

            trigger: 'blur',
          },
        ],
      },
    }
  },

  created() {
    this.getList()
    sellerList().then((res) => {
      this.sellerListData = res.data
    })
  },
  watch: {
    'queryParams.pageNum': function (val) {
      this.clickedRows = []
    },
  },

  methods: {
    updataPayType(selectPayChannel) {
      if (selectPayChannel) {
        this.offlinePayTypestr = selectPayChannel == 'offlineCash' ? 1 : 2
        let that = this
        this.$modal
          .confirm(
            `是否确认${this.offlinePayTypestr == 1 ? '现金支付' : this.offlinePayTypestr == 2 ? '银行卡转账' : ''}支付`,
          )
          .then(function () {
            return sellerBatchBeforeOfflinePay({
              id: that.prePay.payInfo.businessId,
              offlinePayType: that.offlinePayTypestr,
            })
          })
          .then(() => {
            this.$message({ type: 'success', message: '操作成功' })
            // this.cancel()
            // this.$emit('getList')
            this.getList()
            this.pay.show = false
          })
      } else {
        this.offlinePayTypestr = ''
      }
    },
    /**线下支付方式 */
    offlinePayType(offlinePayType, handlePayMethod, payTypeStr) {
      this.offlinePayTypestr = offlinePayType
      handlePayMethod({ payChannel: payTypeStr })
    },
    /**批量提前付款 */
    handleBatchPrePay() {
      const idList = this.tableCheck.map((i) => i.id)
      batchSellerBeforePay({ idList }).then((res) => {
        this.pay.show = true
        this.pay.formData = res.data
      })
    },
    alertMessage(data) {
      this.$alert(data.handleRemark, '拒绝原因', {
        confirmButtonText: '确定',
      })
    },
    confirmPayment() {
      this.$confirm(this.$t('确认支付'), this.$t('提示'), { type: 'warning' }).then(() => {
        handBeforePay({ id: this.earlyPayInfo.data.id }).then((res) => {
          const { code, data, msg } = res
          console.log(`res ==>`, res)
          if (code == 200) {
            this.$message({ type: 'success', message: msg })

            this.cloudProductPayCancel()
            this.getList()
          }
        })
      })
    },

    handleDelete(row) {
      this.$confirm(this.$t('确认删除?'), this.$t('提示'), {
        type: 'warning',
      }).then(() => {
        delSkuSellerApply(row.id).then((res) => {
          const { code, data, msg } = res
          if (code === 200) {
            if (res.code == 200) {
              this.$message({ type: 'success', message: msg })

              this.getList()
            }
          }
        })
      })
    },
    checkData(data) {
      this.payStatus = !this.payStatus
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.5)',
      })
      let payData = {
        businessType: this.payFormData.businessType,
        businessId: this.payFormData.businessId,
        payChannel: data.payChannel,
        orderAmount: this.payFormData.orderAmount,
        description: '',
        attach: this.payFormData.attach,
        payPayDescription: [],
      }
      toPay(payData)
        .then((res) => {
          loading.close()
          window.open(res.data.pay_url)
          setTimeout(() => {
            this.getList()
          }, 1000)
        })
        .catch((e) => {
          loading.close()
        })
    },
    cloudProductPayCancel() {
      this.cloudProductPay = !this.cloudProductPay
      this.getList()
    },
    relaod() {
      this.getList()
    },
    handleEdit(row) {
      this.$refs.Skucontmoduler.setSkuInfo(row)
      this.$refs.Skucontmoduler.checkNumber('basicInformationSeller')
    },

    backToInventoryCancel() {
      this.backToInventoryFlage = !this.backToInventoryFlage
      this.getList()
    },
    backToInventorySubmitForm(value) {
      this.$refs.backToInventoryData.validate((valid) => {
        if (valid) {
          sellerBackSku(this.backToInventoryData).then((res) => {
            this.$message({
              type: 'success',
              message: this.$t('操作成功'),
            })
            this.backToInventoryCancel()
          })
        }
      })
    },
    // 退回
    backToInventory(data) {
      this.backToInventoryFlage = !this.backToInventoryFlage
      this.backToInventoryData.id = data.id
    },

    // 取消申请
    cancel() {
      this.editDialogConfig = !this.editDialogConfig
    },

    // 展示申请
    submitFormData(data) {
      this.curentData = data
      this.editDialogConfig = !this.editDialogConfig
    },
    /** 查询菜单列表 */
    getList() {
      /****************** 处理查询条件 *********************/
      const selectDate = this.queryParams.time || []
      const applyStartTime = selectDate[0] || ''
      const applyEndTime = selectDate[1] || ''
      const data = {
        ...this.queryParams,
        applyStartTime,
        applyEndTime,
      }
      delete data.time
      /**************** 处理查询条件 end *******************/
      this.loading = true
      getSkuSellerApplyList(data).then((res) => {
        this.tableData = res.rows
        this.pageTotal = res.total
        this.loading = false
      })
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.value1 = null
      Object.keys(this.queryParams).forEach((key) => {
        this.queryParams[key] = null
      })
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10

      this.getList()
    },

    /** 展开/折叠操作 */
    toggleExpandAll() {
      this.refreshTable = false
      this.isExpandAll = !this.isExpandAll
      this.$nextTick(() => {
        this.refreshTable = true
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.payMessage {
  text-align: center;
  font-size: 16px;
  color: black;
  font-weight: 700;
  margin-bottom: 10px;
}

.payAllData {
  height: 200px;
}

.payTitle {
  font-size: 24px;
  font-weight: 700;
  width: 100%;
  text-align: center;
  margin-bottom: 20px;

  color: black;
}

.payList {
  height: 60px;
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
}

.payList:hover {
  transform: scale(1.1);
}

.payContent {
  padding: 5px 0;
  display: flex;
  justify-content: space-around;
}

.adjustment {
  border-radius: 2px;
  padding: 4px;
  background-color: #e1eafc;
}

.goods {
  &-img {
    &-box {
      position: relative;
    }

    &-mini {
      height: 50px;
      border-radius: 3px;

      &:hover {
        & + .goods-img-big {
          display: block;
        }
      }
    }

    &-big {
      // display: none;
      position: absolute;
      z-index: 100;
      top: -180px;
      left: 0;
      transform: translate(0, 70px);
      width: 200px;
      height: 200px;
      border-radius: 3px;
    }
  }
}

.bigImg {
  border-radius: 3px;
  z-index: 10;
  position: fixed;
  width: 200px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
